<template>
  <div class="outer-container">
    <div class="container">
<!--      <div class="header">
        Header
      </div>-->
      <el-main class="content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>
      <el-footer class="bottom-nav">
        <el-button
            v-for="item in menuItems"
            :key="item.name"
            :class="{ active: activeNav === item.name }"
            @click="setActiveNav(item.name, item.path)"
            link>
          <div class="icon-text">
            <svg-icon
                style="margin-bottom: 5px"
                :size="iconSize"
                :icon-class="item.meta.icon"/>
            <span>{{ item.meta.title }}</span>
          </div>
        </el-button>
      </el-footer>
    </div>
  </div>
</template>

<script setup>
import router, { commonRoutes } from "@/router";
import { onMounted, ref } from "vue";
import SvgIcon from "@/components/SvgIcon/index.vue";

const iconSize = ref("14px");
const activeNav = ref("overview"); // 当前选中的导航项
const menuItems = commonRoutes[0].children; // 导航菜单项
onMounted(() => {
  router.push("overview");
});
const setActiveNav = (name, path) => {
  activeNav.value = name; // 更新当前选中的导航项
  router.push(path);
};
</script>

<style scoped>
/* 通用样式 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* 最外层容器 */
.outer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh; /* 限制高度为视口高度 */
  flex-direction: column;
  background-color: #f8f9fa;
  overflow: hidden; /* 防止页面整体滚动 */
}

/* 内层容器 */
.container {
  display: flex;
  flex-direction: column;
  height: 100%; /* 填充整个外层容器 */
  width: 100%;
  max-width: 600px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 头部区域固定高度 */
.header {
  background-color: #007bff;
  color: white;
  text-align: center;
  padding: 10px 0;
  font-size: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /*flex-shrink: 0; !* 防止头部被压缩 *!*/
}

/* 主内容区占用剩余空间 */
.content {
  flex: 1; /* 占据剩余高度 */
  padding: 10px;
  overflow-y: auto; /* 超出时显示滚动条 */
}

/* 底部导航固定 */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  padding: 5px 0;
  cursor: pointer;
  flex-shrink: 0; /* 防止底部被压缩 */
}

/* 图标和文字 */
.icon-text {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 12px;
  text-align: center;
}

.bottom-nav .el-button {
  text-decoration: none;
  color: #6c757d;
  font-size: 14px;
  text-align: center;
  flex: 1;
  transition: color 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom-nav .el-button .icon {
  font-size: 20px;
  margin-bottom: 5px;
}

/* 让激活状态时的按钮颜色改变 */
.bottom-nav .el-button.active {
  color: #007bff;
  font-weight: bold;
}


</style>
